/**
 * 型体页纯粹达成率表格组件
 */
<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import http from '@/axios/http'

const route = useRoute()
const model = ref(route.query.model)

const factory = ref('')
const revision = ref('')
const dmaterial = ref('')

const factoryList = ref([])
const revisionList = ref([])
const dmaterialList = ref([])

const tableData = ref([])
const isLoading = ref(false)

watch([factory, revision, dmaterial], () => {
  getStandardDetail()
})

function getStandardOption() {
  http.post("/model/getStandardOption", {
    model: model.value
  }).then(res => {
    factoryList.value = res.data.factoryList
    revisionList.value = res.data.revisionList
    dmaterialList.value = res.data.dmaterialList
  }).catch(err => {
    console.log(err)
  })
}

async function getStandardDetail() {
  isLoading.value = true

  await http.post("/model/getStandardDetail", {
    model: model.value,
    factory: factory.value,
    revision: revision.value,
    dmaterial: dmaterial.value,
  }).then(res => {
    tableData.value = res.data
    if (tableData.value.length === 100) {
      // eslint-disable-next-line no-undef
      ElMessage({
        message: '表格中最多只能显示 100 条数据！',
        type: 'warning',
        duration: 5000
      })
    }
  }).catch(err => {
    console.log(err)
  })

  isLoading.value = false
}

onMounted(() => {
  getStandardOption()
  getStandardDetail()
})
</script>

<template>
  <div id="model-standard-table">
    <div class="standard-top">
      <div class="standard-title">
        <span>标准秒值⭐</span>
      </div>
      
      <div class="standard-selector">
        <div class="standard-selector-item">
          <span>工厂：</span>

          <el-select
            v-model="factory"
            clearable
            filterable
            :teleported="false"
            no-data-text="暂无数据"
            no-match-text="暂无该工厂"
            placeholder="请选择工厂"
            style="display: inline-block; width: 115px;"
          >
            <div style="max-height: 170px;">
              <el-option
                v-for="item in factoryList"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </div>
          </el-select>
        </div>

        <div class="standard-selector-item">
          <span>材质：</span>

          <el-select
            v-model="dmaterial"
            clearable
            filterable
            :teleported="false"
            no-data-text="暂无数据"
            no-match-text="暂无该材质"
            placeholder="请选择材质"
            style="display: inline-block; width: 115px;"
          >
            <div style="max-height: 170px;">
              <el-option
                v-for="item in dmaterialList"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </div>
          </el-select>
        </div>

        <div class="standard-selector-item">
          <span>版本：</span>

          <el-select
            v-model="revision"
            clearable
            filterable
            :teleported="false"
            no-data-text="暂无数据"
            no-match-text="暂无该版本"
            placeholder="请选择版本"
            style="display: inline-block; width: 115px;"
          >
            <div style="max-height: 170px;">
              <el-option
                v-for="item in revisionList"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </div>
          </el-select>
        </div>
      </div>
    </div>

    <div class="standard-bottom">
      <el-table
        :data="tableData"
        v-loading="isLoading"
        element-loading-background="rgba(50, 50, 80, 0.8)"
        empty-text="暂无数据"
        max-height="28vh"
        size="small"
      >
        <el-table-column label="工厂" width="70" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.factory }}
          </template>
        </el-table-column>

        <el-table-column label="材质" width="80" header-align="center" align="left">
          <template #default="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.dmaterial"
              placement="top"
            >
              <div class="text-overflow">
                {{ scope.row.dmaterial }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column label="版本" width="70" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.revision }}
          </template>
        </el-table-column>

        <el-table-column label="标准时间(秒)" header-align="center" align="center">
          <el-table-column label="裁断" width="75" header-align="center" align="center">
            <template #default="scope">
              {{ scope.row.cut_std !== null ? scope.row.cut_std : '\\' }}
            </template>
          </el-table-column>

          <el-table-column label="准备" width="75" header-align="center" align="center">
            <template #default="scope">
              {{ scope.row.upp_std !== null ? scope.row.upp_std : '\\' }}
            </template>
          </el-table-column>

          <el-table-column label="针车" width="75" header-align="center" align="center">
            <template #default="scope">
              {{ scope.row.upp2_std !== null ? scope.row.upp2_std : '\\' }}
            </template>
          </el-table-column>

          <el-table-column label="半成品" width="75" header-align="center" align="center">
            <template #default="scope">
              {{ scope.row.sol_std !== null ? scope.row.sol_std : '\\' }}
            </template>
          </el-table-column>

          <el-table-column label="成型" width="75" header-align="center" align="center">
            <template #default="scope">
              {{ scope.row.las_std !== null ? scope.row.las_std : '\\' }}
            </template>
          </el-table-column>

          <el-table-column label="加工1" width="75" header-align="center" align="center">
            <template #default="scope">
              {{ scope.row.ad1_std !== null ? scope.row.ad1_std : '\\' }}
            </template>
          </el-table-column>

          <el-table-column label="加工2" width="75" header-align="center" align="center">
            <template #default="scope">
              {{ scope.row.ad2_std !== null ? scope.row.ad2_std : '\\' }}
            </template>
          </el-table-column>
        </el-table-column>
        
        <el-table-column label="人均时产能(双/时)" header-align="center" align="center">
          <el-table-column label="裁断" width="75" header-align="center" align="center">
            <template #default="scope">
              {{ scope.row.cut_cap !== null ? scope.row.cut_cap : '\\' }}
            </template>
          </el-table-column>

          <el-table-column label="准备" width="75" header-align="center" align="center">
            <template #default="scope">
              {{ scope.row.upp_cap !== null ? scope.row.upp_cap : '\\' }}
            </template>
          </el-table-column>

          <el-table-column label="针车" width="75" header-align="center" align="center">
            <template #default="scope">
              {{ scope.row.upp2_cap !== null ? scope.row.upp2_cap : '\\' }}
            </template>
          </el-table-column>

          <el-table-column label="半成品" width="75" header-align="center" align="center">
            <template #default="scope">
              {{ scope.row.sol_cap !== null ? scope.row.sol_cap : '\\' }}
            </template>
          </el-table-column>

          <el-table-column label="成型" width="75" header-align="center" align="center">
            <template #default="scope">
              {{ scope.row.las_cap !== null ? scope.row.las_cap : '\\' }}
            </template>
          </el-table-column>

          <el-table-column label="加工1" width="75" header-align="center" align="center">
            <template #default="scope">
              {{ scope.row.ad1_cap !== null ? scope.row.ad1_cap : '\\' }}
            </template>
          </el-table-column>

          <el-table-column label="加工2" width="75" header-align="center" align="center">
            <template #default="scope">
              {{ scope.row.ad2_cap !== null ? scope.row.ad2_cap : '\\' }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#model-standard-table {
  width: 100%;
  height: 100%;
  overflow: auto;

  .standard-top {
    width: 100%;
    height: 17%;
    color: white;
    font-size: 1.8vh;
    font-weight: normal;
    position: relative;

    .standard-title {
      display: inline-block;
      margin-top: 1%;
      margin-left: 2.8%;
    }

    .standard-selector {
      width: 78%;
      position: absolute;
      left: 20%;
      top: 13%;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;

      .standard-selector-item {
        margin-left: 2.5%;
        margin-bottom: 1%;

        --el-color-primary: green;

        &:deep(.el-input__wrapper) {
          background-color: black;
        }

        &:deep(.el-input__inner) {
          color: #ccc;
        }

        &:deep(.el-select__popper.el-popper) {
          background-color: black;
        }

        &:deep(.el-select-dropdown__item) {
          color: white;
          background-color: black;
        }

        &:deep(.el-select-dropdown__item.selected) {
          color: white;
          background-color: green;
        }

        &:deep(.el-select-dropdown__item.hover) {
          color: white;
          background-color: #666;
        }
      }
    }
  }

  .standard-bottom {
    width: 98%;
    height: 75%;
    margin: 0 1% 0 1%;

    --el-bg-color: rgb(50, 50, 120);
    --el-text-color-secondary: white;

    .el-table {
      --el-table-text-color: white;
      --el-table-bg-color: rgb(50, 50, 80);
      --el-table-tr-bg-color: rgb(50, 50, 80);
      --el-table-row-hover-bg-color: rgb(80, 80, 80);
      --el-table-border-color: transparent;

      border-radius: 1vh;
      font-size: 1.6vh;

      &:deep(thead th) {
        background-color: rgb(50, 50, 120);
      }

      &:deep(.text-overflow) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>